<template>
  <div class="activity-wrap">
    <div class="apply-logo"></div>

    <div class="apply-box">
      <div class="apply-btn">
        <img src="./btn4.png" class="btn" v-if="apply==1" @click="applyActivity" onclick="return false"/>
        <img src="./btn5.png" class="btn" v-else-if="apply==2" onclick="return false"/>
        <img src="./btn2.png" class="btn" v-else-if="apply==3" onclick="return false"/>
        <img src="./btn1.png" class="btn" v-else-if="apply==4" onclick="return false"/>
        <img src="./btn3.png" class="btn" v-else-if="apply==5" onclick="return false"/>
      </div>
      <div class="apply-num" :class="{'number':applyEnd == 3}">报名人数：{{applyNum}}人</div>

      <div class="apply-time" v-if="applyEnd == 1">
        <div class="title" v-text="content"></div>
        <div class="time-box">
          <span class="num">{{hour}}</span><span class="word">时</span><span class="num">{{min}}</span><span
          class="word">分</span><span
          class="num">{{second}}</span><span class="word">秒</span>
        </div>
      </div>
      <div class="apply-time end" v-else-if="applyEnd == 2">报名截止，等待开奖</div>

      <div class="gift-box"><img src="./title.png" class="gift-title" onclick="return false"/></div>
      <!--未开奖-->
      <div class="gift-con" v-if="showRank == 1">
        <div class="con">未到开奖时间，请等待...</div>
      </div>
      <!--开奖列表-->
      <div class="rank-con" v-else-if="showRank == 2">
        <div class="rank-wrap">
          <ul class="activity" :class="{active:animate == true}">
            <li v-for="(item,index) in rankList" :key="index">
              <span>恭喜</span><span>{{item.userName}}</span><span v-if="item.status==3">一等奖</span><span
              v-else-if="item.status==4">二等奖</span><span v-else-if="item.status==5">三等奖</span><span
              v-else>成为幸运用户</span>
            </li>
          </ul>
        </div>
        <div class="rank-pull"><img src="./pull.png" class="pull" @click="queryPrize" onclick="return false"/></div>
      </div>

      <!--规则-->
      <div class="rule-title"><img src="./rule.png" class="rule" onclick="return false"></div>
      <div class="rule-con">
        <p v-for="(rule,index) in ruleList" :key="index">{{rule}}</p>
      </div>
      <div class="copy">本活动最终解释权归蓝聘平台所有！</div>
    </div>

    <!--报名成功-->
    <transition name="fade">
      <div class="apply-success" v-show="showModal">
        <div class="success-con">
          <div class="tip-word">报名成功</div>
        </div>
      </div>
    </transition>

    <!--获奖名单-->
    <div class="prize-modal" v-show="showPrize" @click="hidePrize"></div>
    <div class="prize-wrap" v-show="showPrize">
      <div class="prize-box">
        <div class="title">获奖名单</div>
        <div class="panel-box">
          <span>序号</span><span class="name">用户</span><span>奖品</span>
        </div>
        <div class="prize-con">
          <div class="prize-list" v-for="(prize,index) in prizeList" :key="index">
            <span>{{index+1<10?('0'+(index+1)):(index+1)}}</span>
            <div class="phone">{{prize.userName}}</div>
            <span class="article">{{prize.activityAward}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {formatDate, doubleNum} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        apply: 0,
        showRank: 0,
        applyNum: "",
        hour: "",
        min: "",
        second: "",
        showModal: false,
        showPrize: false,
        animate: false,
        applyEnd: 0,
        activityId: "",
        rankList: [],
        ruleList: [],
        prizeList: [],
        actEnd: 0,
        content: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.activityId = this.$route.query.id;
      this.queryActivity();
    },
    methods: {
      queryActivity() {//获取活动详情
        this.axios.get(baseUrl + "/activity/get_activity?sgin=" + this.userSign + "&id=" + this.activityId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.applyNum = resultObj.data.num;//报名数
            this.rankList = resultObj.data.userList; //中奖名单

            if (resultObj.data.countDownTime <= 0) { //活动结束
              if (this.rankList.length == 0 || this.rankList == null) {
                this.apply = 3;
                this.applyEnd = 2;
              } else {
                this.applyEnd = 3;
                this.apply = 4;
              }
            } else {
              if (resultObj.data.status == 1) { //是否报名
                this.apply = 2;
              } else {
                this.apply = 1;
              }

              //活动倒计时
              let startTime = resultObj.data.activityBeginTime;//开始时间
              let endTime = resultObj.data.activityEndTime;//结束时间
              endTime = endTime > startTime ? endTime : startTime;
              startTime = endTime > startTime ? startTime : endTime;
              let intervalDate = setInterval(() => {
                let nowTime = new Date().getTime();
                if (startTime >= nowTime) {
                  let timeObj = formatDate(new Date(startTime), 'yyyy-MM-dd').split("-");
                  this.hour = timeObj[0];
                  this.min = timeObj[1];
                  this.second = timeObj[2];
                  this.content = "活动开始时间：";
                  this.apply = 5;
                  this.applyEnd = 1;
                  clearInterval(intervalDate);
                }
                else if (endTime >= nowTime) {//显示倒计时
                  let t = endTime - nowTime;
                  let day = Math.floor(t / 1000 / 60 / 60 / 24);
                  let hours = Math.floor(t / 1000 / 60 / 60 % 24);
                  let minute = Math.floor(t / 1000 / 60 % 60);
                  let sec = Math.floor(t / 1000 % 60);
                  this.content = "报名截止时间：";
                  this.hour = doubleNum(parseInt(day * 24) + parseInt(hours));
                  this.min = doubleNum(minute);
                  this.second = doubleNum(sec);
                  this.applyEnd = 1;
                }
                else {
                  this.actEnd = 1;
                  clearInterval(intervalDate);
                }
              }, 100);
            }

            if (this.rankList.length > 0) {
              this.showRank = 2;
              this.scrollUp();
            } else {
              this.showRank = 1;
            }
            this.ruleList = resultObj.data.activityDetails == "" ? "" : resultObj.data.activityDetails.split("\r\n");//规则
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(function (error) {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      scrollUp() {//获奖名单滚动
        setInterval(() => {
          this.animate = true;// 向上滚动的时候需要添加css3过渡动画
          setTimeout(() => {
            this.rankList.push(this.rankList[0]);// 将数组的第一个元素添加到数组的
            this.rankList.shift(); //删除数组的第一个元素
            this.animate = false;
          }, 500)
        }, 1500);
      },
      queryPrize() {//查询获奖名单详情
        this.showPrize = true;
        this.axios.get(baseUrl + "/activity/get_activity?sgin=" + this.userSign + "&id=" + this.activityId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.prizeList = resultObj.data.userList;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      },
      hidePrize() {
        this.showPrize = false;
      },
      applyActivity() {//报名
        if (this.actEnd == 1) {
          this.$vux.toast.text("活动报名时间已过，禁止报名！", "middle");
        } else {
          this.axios.get(baseUrl + "/activity/set_activity_user?sgin=" + this.userSign + "&id=" + this.activityId).then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0) {
              if (resultObj.data > 0) {//报名成功
                this.apply = 2;
                this.applyNum = parseInt(this.applyNum + 1);
                this.showModal = true;
                setTimeout(() => {//关闭成功提示框
                  this.showModal = false;
                }, 1500)
              } else if (resultObj.data == -1) {
                this.apply = 2;
                this.$vux.toast.text("已报名成功,请不要重复提交！", "middle");
                return;
              } else if (resultObj.data == 0) {
                this.apply = 1;
                this.$vux.toast.text("报名失败,请稍后重试！", "middle");
                return;
              }
            } else if (resultObj.code == 10002) {//登录失效
              if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                window.webkit.messageHandlers.JSToViewController.postMessage({
                  "body": "JSToViewController"
                });
              } else {
                window.android.goLogin(); //调用安卓
              }
            }
            else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.toast.text("网络异常", "middle");
          });
        }

      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .activity-wrap
    wh(100%, auto)
    overflow-y: auto
    .apply-logo
      width: 100%
      height: 5.067rem
      background-image: url("./logo.jpg")
      background-repeat: no-repeat
      background-size: 100% 100%
    .apply-box
      wh(100%, auto)
      background: linear-gradient(0deg, rgba(255, 116, 97, 1), rgba(255, 131, 77, 1), rgba(251, 163, 102, 1))
      .apply-btn
        margin: 0 auto
        wh(5.68rem, 1rem)
        .btn
          wh(100%, 100%)
      .apply-num
        margin-top: 0.4rem
        text-align: center
        size-color(0.387rem, rgba(255, 255, 255, 1))
      .number
        margin-bottom: 0.467rem
      .apply-time
        fj(center, center)
        margin-top: 0.533rem
        margin-bottom: 0.467rem
        .title
          size-color(0.387rem, rgba(255, 255, 255, 1))
        .time-box
          display: flex
          align-items: center
          size-color(0.387rem, rgba(255, 255, 255, 1))
          .num
            display: flex
            align-items: center
            width: auto
            padding: 0.1rem 0.1rem
            height: 0.48rem
            @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
              width: auto
              padding: 0.1rem 0.1rem
            }
            background: linear-gradient(0deg, rgba(251, 74, 25, 1), rgba(255, 101, 58, 1))
            border-radius(0.04rem)
          .word
            padding-left: 0.2rem
            padding-right: 0.2rem
      .end
        font-size: 0.387rem
        color: #fff
      .gift-box
        margin: 0 auto
        wh(5.147rem, 0.987rem)
        margin-bottom: 0.4rem
        .gift-title
          wh(100%, 100%)
      .gift-con
        margin: 0 auto
        wh(9.587rem, 3.413rem)
        margin-bottom: 0.6rem
        background-image: url("./gift.png")
        background-repeat: no-repeat
        background-size: 100% 100%
        .con
          margin-left: 3.893rem
          line-height: 3.413rem
          size-color(0.387rem, rgba(255, 255, 255, 1))
      .rule-title
        wh(4.507rem, 0.427rem)
        margin: 0 auto
        margin-bottom: 0.4rem
        .rule
          wh(100%, 100%)
      .rule-con
        width: 92.53%
        margin: 0 auto
        margin-bottom: 0.533rem
        font-size: 0.32rem
        color: rgba(238, 238, 238, 1)
        p
          padding: 0.1rem
          line-height: 0.56rem
      .rank-con
        margin: 0 auto
        wh(8.693rem, 3.453rem)
        border: 0.013rem dashed rgba(255, 250, 250, 1)
        border-radius: 0.147rem
        margin-bottom: 0.533rem
        .rank-wrap
          margin: 0 auto
          margin-top: 0.24rem
          wh(7.053rem, 2.667rem)
          overflow: hidden
          .activity
            wh(100%, 100%)
            li
              display: flex;
              justify-content: space-between
              wh(auto, 0.666666rem)
              size-color(0.373333rem, #FFFFFF)
              line-height: 0.666666rem
          .active
            transition: all 0.5s
            margin-top: -0.666666rem
        .rank-pull
          margin: 0 auto
          margin-top: 0.1rem
          wh(0.427rem, 0.227rem)
          .pull
            width: 100%
            height: 100%
      .copy
        font-size: 0.333rem
        color: rgba(238, 238, 238, 1)
        text-align: center
        padding-bottom: 5.5rem

    .apply-success
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .success-con
        wh(5.933rem, 5.253rem)
        bg-image("./success.png", 100%, 100%)
        .tip-word
          margin-top: 3.893rem
          text-align: center
          size-color(0.48rem, rgba(67, 67, 67, 1))

    .prize-modal
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.5);
    .prize-wrap
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      margin: auto
      z-index: 100
      wh(8.4rem, 9.173rem)
      .prize-box
        wh(8.4rem, 9.173rem)
        background: linear-gradient(0deg, rgba(255, 116, 97, 1), rgba(255, 143, 76, 1), rgba(255, 208, 146, 1))
        border-radius: 0.16rem
        .title
          text-align: center
          padding-top: 0.587rem
          margin-bottom: 0.573rem
          size-color(0.453rem, rgba(255, 255, 255, 1))
        .panel-box
          display: flex
          justify-content: space-between
          margin-left: 0.4rem
          margin-bottom: 0.4rem
          width: 7.067rem
          size-color(0.427rem, rgba(255, 255, 255, 1))
          font-weight: bold
          .name
            padding-right: 0.9rem
        .prize-con
          margin: 0 auto
          wh(7.387rem, 66.4%)
          size-color(0.387rem, rgba(255, 255, 255, 1))
          overflow: hidden
          overflow-y: auto
          .prize-list
            display: flex
            justify-content: space-between
            margin-bottom: 0.25rem
            width: 100%
            .phone
              text-align: center
              width: 3.2rem
              ellipsis()
            .article
              text-align: center
              width: 2rem
              ellipsis()
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s ease;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }
</style>
